<template>
  <div class="w-screen h-screen overflow-hidden grid place-items-center">
    <div
      class="fixed opacity-1 inset-0 -z-20 bg-repeat bg-[url('/images/squares-background.png')]"
    ></div>
    <div
      class="fixed opacity-1 inset-0 -z-19 bg-repeat bg-size bg-size-110 object-fill bg-[url('/images/squares-background.png')]"
    ></div>

    <div
      class="shadow-lg hover:shadow-2xl transition-shadow p-6 bg-base-100 gap-8 relative flex outline outline-base-300 rounded-lg"
    >
      <div class="gap-8 flex">
        <div class="relative px-4 bg-base-200 rounded-lg overflow-hidden">
          <img src="/images/login.png" alt="background" class="object-cover h-full w-110" />
          <div
            class="backdrop-blur-2xl h-30 items-center px-5 py-4 flex gap-5 rounded-lg overflow-hidden absolute bottom-4 left-4 right-4"
          >
            <div class="w-1 h-full bg-neutral/40"></div>
            <div class="text-base leading-loose">
              <p v-for="item in AppDesc">{{ item }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 表单 -->
      <div class="w-96 grow">
        <div class="flex gap-2 items-center">
          <img src="/images/logo.png" alt="logo" class="object-cover rounded-lg w-1/7" />
          <div class="font-semibold text-lg line-clamp-1">成都勤力诉调案件管理系统</div>
        </div>
        <div class="mt-10">
          <UForm :schema="schema" :state="state" class="space-y-4" @submit="handleSubmit">
            <UFormField label="账号" name="phone">
              <UInput v-model="state.phone" placeholder="请输入手机号" />
            </UFormField>

            <UFormField label="密码" name="password">
              <UInput v-model="state.password" type="password" placeholder="请输入密码" />
            </UFormField>

            <UButton type="submit" trailing-icon="i-mingcute:arrow-right-line"> 登录 </UButton>
          </UForm>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { AppDesc } from '~/configs/app'
import { object, string } from 'zod'

definePageMeta({
  layout: false
})
useHead({ title: '成都勤力诉调案件管理系统 - 登录' })

const state = reactive({
  phone: '',
  password: ''
})

const schema = object({
  phone: string('请输入账号'),
  password: string('请输入密码')
})

const { push } = useRouter()

function handleSubmit() {
  push('/')
}
</script>
